<template>
	<view class="opus-list">
		<view class="operation">
			<view class="opus-like">
				<view class="left" :animation="animationDataLeft">
					{{blackOps == 'left' ? '我的作品' : '我的喜欢'}}
				</view>
				<view class="right" @click="move" :animation="animationDataRight" :style="{marginLeft: blackOps == 'left' ? '20upx' : '',marginRight: blackOps !== 'left' ? '20upx' : ''}">
					<image :src="blackOps === 'left' ? loveIcon : photoIcon " mode=""></image>
				</view>
			</view>
			<view class="add_opus" @click="addOpus">
				<image :src="addIcon"></image>
			</view>
		</view>
		
		<view class="opus_blank_list">
			<view class="opus" v-for="(item, index) in userInfo.opus" :key="index + item.id">
				<view class="opus-photo">
						<image v-for="(img,index) in item.imgUrls" :key="index" :src="img" mode=""></image>
				</view>
				<view class="opus-info">
					<text class="title">{{item.title}}</text>
					<text class="content">{{item.description}}</text>
				</view>
			</view>
			<view class="no-opus">
				你还没发布作品呢？
			</view>
		</view>
	</view>
</template>

<script>
	import { antFill_ins, antFill_heart, far_fart_plus } from '@/static/svg/index.js'
	export default {
		name: 'Opus',
		props: {
			userInfo: Object
		},
		data () {
			return {
				animationDataRight: {},
				animationDataLeft: {},
				blackOps: 'left',
				loveIcon: antFill_heart,
				photoIcon: antFill_ins,
				addIcon: far_fart_plus
				
			}
		},
		methods: {
			addOpus() {
				console.log('进入画板添加')
				uni.navigateTo({
					url: '/pages/drawing-board/drawing-board',
					animationDuration: 300,
					animationType: 'pop-in'
				})
			},
			move () {
				if( this.blackOps === 'left') {
					console.log('我在左边')
					this.animationDataLeft = this.moveStep(52)
					this.animationDataRight = this.moveStep(-82)
					this.blackOps = 'right'
				} else {
					console.log('我在右边')
					this.animationDataLeft = this.moveStep(0)
					this.animationDataRight = this.moveStep(0)
					this.blackOps = 'left'
				}
			},
			moveStep(x) {
				var animation = uni.createAnimation({
				  duration: 1000,
				    timingFunction: 'ease',
				})
				
				this.animation = animation
						
				animation.translateX(x).step()
						
				return animation.export()	
			}
		}
	}
</script>

<style lang="less" scoped>
	.opus-list {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		.operation {
			display: flex;
			padding: 0 40rpx;
			flex-direction: row;
			justify-content: space-between;
			.opus-like {
				display: flex;
				flex-direction: row;
				.left {
					position: relative;
					z-index: 2;
					width: 172upx;
					height: 72upx;
					line-height: 72upx;
					border-radius: 36upx;
					background-color: rgba(16, 16, 16, 100);
					color: rgba(255, 255, 255, 100);
					font-size: 28upx;
					text-align: center;
					font-family: -apple-system;
					border: 2upx solid rgba(255, 255, 255, 100);
				}
				.right {
					width: 72upx;
					height: 72upx;
					line-height: 40upx;
					border-radius: 120upx;
					background-color: rgba(236, 236, 236, 100);
					color: rgba(255, 255, 255, 100);
					font-size: 28upx;
					text-align: center;
					font-family: -apple-system;
					border: 2upx solid rgba(255, 255, 255, 100);
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					image {
						width: 32upx;
						height: 32upx;
					}
				}
				.opr {
					.item {
						width: 172upx;
						height: 72upx;
						line-height: 72upx;
						border-radius: 36upx;
						background-color: rgba(16, 16, 16, 100);
						color: rgba(255, 255, 255, 100);
						font-size: 28upx;
						text-align: center;
						font-family: -apple-system;
						border: 2upx solid rgba(255, 255, 255, 100);
					}
					.icon {
						padding-left: 20upx;
						width: 72upx;
						height: 72upx;
						line-height: 40upx;
						border-radius: 120upx;
						background-color: rgba(236, 236, 236, 100);
						color: rgba(255, 255, 255, 100);
						font-size: 28upx;
						text-align: center;
						font-family: -apple-system;
						border: 2upx solid rgba(255, 255, 255, 100);
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						image {
							width: 32upx;
							height: 32upx;
						}
					}
				}
			}
			.add_opus {
				width: 72upx;
				height: 72upx;
				border-radius: 50%;
				background-color: rgba(236, 236, 236, 100);
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				image {
					width: 32upx;
					height: 32upx;
				}
			}
		}
		.opus_blank_list {
			margin-top: 60upx;
			width: 100%;
			overflow: hidden;
			padding:  0 40upx;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap;
			.no-opus {
				margin-top: 200upx;
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
				.opus {
					margin-bottom: 54upx;
					width: 324upx;
					display: flex;
					flex-direction: column;
					.opus-photo {
						width: 324upx;
						height: 324upx;
						border-radius: 20upx;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: space-between;
						background-color: #eee;
						image {
							width: 156upx;
							height: 156upx;
							background-color: #2b3b4b;
						}
						image:nth-child(1) {
							border-radius: 20upx 0 0 0;
						}
						image:nth-child(2) {
							border-radius: 0 20upx 0 0;
						}
						image:nth-child(3) {
							border-radius: 0 0 0 20upx;
						}
						image:nth-child(4) {
							border-radius: 0 0 20upx 0;
						}
					}
					.opus-info {
						margin-top: 20upx;
						display: flex;
						flex-direction: column;
						.title {
							color: rgba(16, 16, 16, 100);
							font-size: 28upx;
							font-family: PingFangSC-bold;
						}
						.content {
							color: rgba(223, 223, 223, 100);
							font-size: 28upx;
							text-align: left;
							font-family: PingFangSC-regular;
						}
					}
				}
		}
	}
</style>
